<template>
  <div style="position: absolute;top: 100px;right: 400px;" class="head">
    <el-avatar :size="70" fit="contain" :src="userInfo.headImgUrl" style="margin-top: 100px" v-if="userInfo.token != null"></el-avatar>
    <span  v-if="userInfo.token != null">
        {{ userInfo.userName }}
    </span>
    <el-button type="primary" size="mini" @click="loginOut" style="margin-bottom: -10px;" v-if="userInfo.token != null">退出</el-button>
    <el-button type="primary" size="mini" @click="goLogin" style="margin-bottom: -10px;" v-else>登录</el-button>
  </div>
</template>

<script>
export default {
  name: "AuthComponent",
  data() {
    return {
      userInfo: {
        headImgUrl: '',
        userName: '',
        id: '',
        token: null
      },
    }
  },
  methods: {
    loginOut() {
      localStorage.removeItem("userInfo")
      this.userInfo =  {
        id: '',
        headImgUrl: '',
        userName: '',
        token: null
      }
      this.$router.push({ path: `/`})
    },
    goLogin() {
      this.$router.push({ path: `/login`})
    }
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    if (!this.userInfo) {
      this.userInfo= {
        headImgUrl: '',
        userName: '',
        id: '',
        token: null
      }
    }
  }
}
</script>

<style scoped>

</style>